<template>
  <div class="companyProfile">
    <!-- <div style="width: 1200px;padding: 20px 0;margin: 0 auto;">
        <a-breadcrumb separator=">">
            <a-breadcrumb-item><a href="/">首页</a></a-breadcrumb-item>
            <a-breadcrumb-item style="color:#FFBE37;">关于我们</a-breadcrumb-item>
        </a-breadcrumb>
      </div>
      <div class="companycontent">
          <div class="left">
              <p class="gstitle">- 公司概况 -</p>
              <p class="tabs" :class="tabindex == 2?'active':''" @click="(e)=>{tab(e)}">关于我们</p>
              <p class="tabs" :class="tabindex == 1?'active':''" @click="(e)=>{tab(e)}">联系我们</p>
          </div>
          <div class="right">
              <router-view />
          </div>
      </div> -->
    <div class="bannerImg">
      <div class="topImg">
        <div>
          <img class="gsBanner" src="@/assets/image/byMy/gsbanner.jpg" alt="" />
        </div>
        <img class="gsBanner" src="@/assets/image/byMy/gsbanner.jpg" alt="" />
      </div>
    </div>
    <div class="profile">
      <div class="top">
        <div class="pro_l">
          <p class="title">公司简介</p>
          <p class="englishname">Company profile</p>
        </div>
        <div class="pro_r">
          <div class="targnle"></div>
          <p class="first">
            北京华夏元道文化科技有限公司成立于2016年，是华夏出版社投资设立的全资子公司。公司秉
          </p>
          <p>
            承出版社"传播人道主义、弘扬华夏文化"的宗旨，立足传统的图书出版，实施数字化转型和融合发
          </p>
          <p>
            展战略，围绕残疾人事业发展大局，通过构建传统出版、数字化融合出版、教育培训"三位一体"融合发
          </p>
          <p class="last">
            展的战略布局，打造"华夏元道"的品牌。
          </p>
        </div>
      </div>
      <div class="content">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司的传统出版业务主要涉及传统文化、特殊教育及康复三大领域，并推出了面向全国小学高年级和初中学生的国家级期刊《课外阅读》杂志。公司实施精品图书和精品杂志出版战略，力求多出版具有自主品牌，集科学性、思想性、艺术性、可读性于一体的优秀图书，多出版能够传世的或者走向世界的精品力作。<br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;公司搭建并运营了两大互联网平台：华夏云课堂和爱心阳光中国残疾人综合服务云平台。两大平台均被列入《“十四五”残疾人保障和发展规划》中的基础设施、信息化、科技创新重点项目。华夏云课堂致力于为特殊儿童康复教育行业的从业者及特殊儿童家庭提供优质的在线学习与培训服务，以专业、专心、专注的态度，提供高质量、实用、有价值的知识和课程。爱心阳光中国残疾人综合服务云平台，聚焦残疾人及其家庭的实际需求，以大数据、物联网、人工智能、云计算等数字化科技手段，为残疾人提供“互联网+服务”，探索信息时代残疾人服务的新模式，助力残疾人事业多方融合发展。<br />
      </div>
    </div>
    <div class="nav">
      <p class="title">平台介绍</p>
      <p class="english">Platform introduction</p>
    </div>
    <div class="piatform">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;爱心阳光中国残疾人综合服务云平台(以下简称:云平台)，由中国残疾人联合会宣传文化部指导，华夏出版社和中国残疾人事业新闻宣传促进会联合主办，北京华夏元道文化科技有限公司承建和运营。2021年云平台列入《“十四五”残疾人保障和发展规划》中的基础设施、信息化、科技创新重点项目。<br />
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;云平台聚焦残疾人及其家庭的实际需求，以大数据、物联网、人工智能、云计算等数字化科技手段，为残疾人及其家庭提供更加全面、精准、个性化的服务。云平台设置了新闻资讯、干部学院、政策解读、教育培训、就业创业、残疾预防、康复服务、辅具适配、幸福文旅、法律维权、无障有爱、阳光商城十二个版块，满足残疾人全方位的生活与工作需要，助力残疾人以平等的地位和均等的机会充分参与社会，成为经济社会发展的参与者、贡献者和享有者，共享物质文明和精神文明成果，在全面建成社会主义现代化国家的新征程上不掉队，实现习近平总书记提出的“促进残疾人全面发展和共同富裕”的宏伟目标。
    </div>
    <div class="nav">
      <p class="title">平台理念</p>
      <p class="english">Platform concept</p>
    </div>
    <img class="conscience" src="@/assets/image/byMy/conscience.png" alt="" />
    <p class="mes">
      真正做到关心特殊困难群体，尊重残疾人意愿，保障残疾人权利，注重残疾人的社会参与，推动<br />
      残疾人真正成为权利主体，以帮助残疾人成为经济社会发展的参与者、贡献者和享有者为终身目标
    </p>
    <div class="cooperation">
      <div class="nav">
        <p class="title">合作单位</p>
        <p class="english">Cooperative unit</p>
      </div>
      <img src="@/assets/image/byMy/gsLogo.png" alt="" class="gsLogo" />
    </div>
    <div class="nav">
      <p class="title">入驻平台</p>
      <p class="english">Settled platform</p>
    </div>
    <div class="platform">
      <img src="@/assets/image/byMy/icon1.jpg" alt="" />
      <img src="@/assets/image/byMy/icon2.jpg" alt="" />
      <img src="@/assets/image/byMy/icon3.jpg" alt="" />
      <img src="@/assets/image/byMy/icon4.jpg" alt="" />
    </div>
    <div class="platformmsg">
      <p class="platmessage">
        爱心阳光中国残疾人综合服务云平台需要不同类型的爱心单位与我们携手前行，实现精准扶残、扶志、扶贫的平台价值，巩固残疾人脱贫成果，提高残疾人生活质量。爱心阳光中国残疾人综合服务云平台，呼吁更多的社会力量参与进来，让更多的残疾人群体感受到社会关怀。所有爱心单位经由爱心阳光中国残疾人综合服务云平台，完成资质审核后，均可入驻云平台。
      </p>
      <div class="lianxi">
        <img src="@/assets/image/byMy/phone.png" alt="" />
        <div class="callMys">
          <p class="title">联系我们</p>
          <div>
            <p>电话：010-84504771</p>
            <p>邮箱：<span>cdpservice@hxph.com.cn</span></p>
            <p>官网：<span>hxyuandao.com</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabindex: null,
    };
  },
  methods: {
    tab(e) {
      // document.querySelector('.active').classList.remove('active');
      // e.target.classList.add('active');
      if (e.target.innerText == "关于我们") {
        this.tabindex = 1;
        this.$router.push("/companyProfile/about");
      } else if (e.target.innerText == "联系我们") {
        this.tabindex = 2;
        this.$router.push("/companyProfile/contact");
      }
    },
  },
  mounted() {
    if (this.$route.name == "contact") {
      this.tabindex = 1;
    } else if (this.$route.name == "about") {
      this.tabindex = 2;
    }
  },
  watch: {
    $route(e) {
      if (e.name == "contact") {
        this.tabindex = 1;
      } else if (e.name == "about") {
        this.tabindex = 2;
      }
    },
  },
};
</script>

<style scoped lang="less">
.topImg {
  max-width: 100% !important;
  // min-height:800px;
  max-height: 693px;
  overflow: hidden;
  div {
    width: 100%;
    max-height: 693px;
    z-index: 0;
    position: absolute;
    filter: blur(10px);
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 800px;
    z-index: 1;
    position: relative;
  }
}
.profile {
  width: 1200px;
  margin: 0 auto;
  height: 590px;
  // background-image: url('~@/assets/image/byMy/profileback.jpg');
  background-size: 100% 590px;
  .top {
    width: 100%;
    height: 200px;
    display: flex;
    .pro_l {
      width: 395px;
      height: 200px;
      background-color: #ffbe37;
      padding-left: 60px;
      padding-top: 45px;
      p {
        width: 290px;
      }
      .title {
        font-weight: bold;
        font-size: 40px;
        line-height: 56px;
        color: #232d32;
      }
      .englishname {
        margin-top: 8px;
        font-size: 36px;
        line-height: 36px;
        color: #232d32;
      }
      //     background-color: #ffffff;
    }
    .pro_r {
      flex: 1;
      position: relative;
      .targnle {
        position: absolute;
        left: 0;
        right: 0;
        width: 0;
        height: 0;
        border-top: 200px solid #ffbe37;
        border-right: 143px solid transparent;
      }
      p {
        text-align: right;
        color: #333333;
        line-height: 32px;
        font-size: 16px;
      }
      .first {
        padding-top: 50px;
      }
      .last {
        margin-right: 460px;
      }
    }
  }
  .content {
    width: 1200px;
    background-size: 1200px 590px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    color: #333333;
    line-height: 32px;
    font-size: 16px;
  }
}
.nav {
  padding-top: 84px;
  padding-bottom: 47px;
  p {
    text-align: center;
  }
  .title {
    color: #000000;
    font-size: 30px;
    line-height: 42px;
  }
  .englishname {
    margin-top: 6px;
    color: #000000;
    font-size: 27px;
    line-height: 38px;
  }
}
.piatform {
  width: 1200px;
  margin: 0 auto;
  padding: 41px 51px 51px;
  background-image: url("~@/assets/image/byMy/mesageBack.png");
  background-size: 100% 100%;
  color: #333333;
  font-size: 16px;
  line-height: 32px;
}
.conscience {
  width: 556px;
  display: block;
  margin: 0 auto;
}
.gsLogo {
  width: 901px;
  display: block;
  margin: 0 auto;
}
.mes {
  text-align: center;
  font-size: 13.5px;
  line-height: 19px;
  margin-bottom: 107px;
}
.cooperation {
  background-color: #ffffff;
}
.gsLogo {
  width: 901px;
  margin: 0 auto;
}
.platform {
  width: 1095px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  img {
    width: 240px;
  }
}
.callMy {
  display: flex;
}
.platformmsg {
  width: 1095px;
  margin: 0 auto;
  margin-top: 22px;
  background-color: #ffffff;
  padding: 25px 65px;
  .platmessage {
    color: #333333;
    font-size: 16px;
    line-height: 32px;
  }
  .lianxi {
    display: flex;
    margin-top: 32px;
    img {
      width: 38px;
    }
    .callMys {
      margin-left: 18px;
      .title {
        color: #000000;
        padding-top: 2px;
        font-size: 12px;
        line-height: 17px;
      }
      div {
        margin-top: 5px;
        display: flex;
        p {
          margin-right: 56px;
          color: #000000;
          font-size: 10.5px;
          line-height: 15px;
          span {
            color: #2d68ff;
          }
        }
      }
    }
  }
}
.companyProfile {
  padding-bottom: 90px;
  margin-top: -50px;
  background-color: #f8f8f8;
  background-image: url("~@/assets/image/employment/backimg.png");
  background-size: 100% auto;
  min-height: calc(100vh - 284px);
  .gsBanner {
  }
  .byMy {
    width: 1200px;
    margin: 0 auto;
  }
  .companycontent {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding-bottom: 50px;
    .left {
      width: 210px;
      height: 150px;
      .gstitle {
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #333333;
        background-color: #ffbe37;
        font-size: 18px;
      }
      .tabs {
        display: block;
        cursor: pointer;
        width: 100%;
        height: 50px;
        color: #333333;
        line-height: 50px;
        padding-left: 30px;
        background-color: #ffffff;
        border-bottom: 2px solid #f5f5f5;
      }
      .active {
        color: #ffbe37;
        background: #fef4ec;
        font-weight: bold;
        border-bottom: 2px solid #eeeeee;
      }
    }
    .right {
      width: 971px;
      background-color: #ffffff;
      padding: 40px;
    }
  }
}
</style>